<template>
  <!-- 编辑弹框 -->
  <el-dialog title="编辑路线" :visible="isEditDialog" @close="btnCancel">
    <el-form ref="form" :rules="rules" :model="form">
      <el-form-item label="线路编号" prop="number" label-width="100px">
        <el-input v-model="form.number">
          XL
        </el-input>
      </el-form-item>
      <el-form-item label="线路名称" prop="name" label-width="100px">
        <el-input v-model="form.name" placeholder="请输入线路名称" />
      </el-form-item>
      <el-form-item label="线路类型" prop="type" label-width="100px">
        <el-input v-model="form.type" placeholder="请输入线路类型" />
      </el-form-item>
      <el-form-item label="起始地机构" prop="startOrganName" label-width="100px">
        <!-- <el-input v-model="form.startOrganName" placeholder="请输入起始地机构" /> -->
        <!-- <el-cascader
            v-model="form.startOrganName"
            placeholder="请选择起始地机构"
            :options="options"
            @change="handleChange"
          /> -->
        <!-- <el-input
          v-model="form.startOrganName"
          placeholder="请选择起始地机构"
          clearable=""
          @focus="isShowTree=true"
        />
        <el-tree
          v-if="isShowTree"
          class="myTree"
          :data="options"
          @node-click="deptSelect"
        /> -->
        <el-select
          v-model="form.startOrganName"
          placeholder="请选择起始地机构"
          clearable
        >
          <el-option hidden :value="options.id" :label="options.name" />
          <el-tree accordion :data="options" :props="{label:'name'}" @node-click="deptSelect" />

        </el-select>

      </el-form-item>
      <el-form-item label="目的地机构" prop="endOrganName" label-width="100px">
        <!-- <el-input
          v-model="form.endOrganName"
          placeholder="请选择目的地机构"
          clearable=""
          @focus="isShowTree1=true"
        />
        <el-tree
          v-if="isShowTree1"
          class="myTree"
          :data="options"
          @node-click="deptSelect1"
        /> -->

        <el-select
          v-model="form.endOrganName"
          placeholder="请选择起始地机构"
          clearable
        >
          <el-option hidden :value="options.id" :label="options.name" />
          <el-tree accordion :data="options" :props="{label:'name'}" @node-click="deptSelect1" />

        </el-select>
      </el-form-item>

      <el-form-item label="距离：" label-width="100px" prop="distance">
        <el-input v-model="form.distance" />
      </el-form-item>

      <el-form-item label="成本：" label-width="100px" prop="cost">
        <el-input v-model="form.cost" />
      </el-form-item>

      <el-form-item>
        <el-button type="danger" @click="btnOK">确认</el-button>
        <el-button @click="btnCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { updateLine } from '@/api/line'
export default {
  props: {
    isEditDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 默认情况下，属性不出现
      isShowTree: false,
      isShowTree1: false,
      options: [{
        label: '东北装运中心',
        children: [{
          label: '沈阳分拣中心',
          children: [
            { label: '和平区营业部' },
            { label: '皇姑区营业部' }
          ]
        }]
      },
      {
        label: '华北转运中心',
        children: [{
          label: '北京分拣中心',
          children: [
            { label: '昌平区营业部' },
            { label: '顺义区营业部' }
          ]
        }, {
          label: '华南转运中心',
          children: [
            { label: '深圳分拣中心', children: [{ label: '宝安区营业部' }, { label: '光明区营业部' }] },
            { label: '广州分拣中心', children: [{ label: '越秀区分拣中心' }, { label: '花都区营业部' }] }
          ]
        }]
      }, {
        label: '华中转运中心',
        children: [{
          label: '武汉分拣中心',
          children: [
            { label: '江汉营业部' },
            { label: '武昌营业部' }
          ]
        }]
      }, {
        label: '华东转运中心',
        children: [{
          label: '上海分拣中心',
          children: [{ label: '虹口区营业部' }, { label: '浦东新区营业部' }]
        }]
      },
      {
        label: '西南转运中心',
        children: [{
          label: '成都分拣中心',
          children: [{ label: '金牛区营业部' }, { label: '青羊区区营业部' }]
        }]
      },
      {
        label: '西北转运中心',
        children: [{
          label: '西安分拣中心',
          children: [{ label: '碑林区营业部' }, { label: '长安区营业部' }]
        }]
      }
      ],
      form: {
        number: '',
        name: '',
        type: '',
        startOrganName: '',
        endOrganName: '',
        distance: '',
        cost: ''
      },
      rules: {
        number: [{ required: true, message: '线路编号不能为空', trigger: 'blur' },
          { message: '线路编号前两位为XL，后6位为数字，请重新输入', trigger: 'blur' }
        ],
        name: [{ required: true, message: '线路名称不能为空', trigger: 'blur' }],
        startOrganName: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        endOrganName: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
      }

    }
  },
  methods: {
    btnOK() {
      const res = updateLine(this.form)
      console.log(res)
    },
    btnCancel() {
      this.$emit('close')
    },
    // 部门选中后的操作
    deptSelect(data) {
      console.log(data)
      // 赋值
      this.form.startOrganName = data.label
      // 关闭弹窗
      this.isShowTree = false
    },
    deptSelect1(data) {
      // 赋值
      this.form.endOrganName = data.label
      // 关闭弹窗
      this.isShowTree1 = false
    }
  }
}
</script>

<style>

</style>
